import React, { useState, useEffect } from 'react';
// import '../styles/pages/home.css'; // 引入样式文件

import RoleTable from "./RoleTable";
import DefaultMenuData from "../../mock/data/MenuData"; // 导入 useNavigate
import DefaultRoleData from "../../mock/data/RoleData"; // 导入 useNavigate

function RolePage () {
    // 从 localStorage 初始化菜单数据
    const [menuData,setMenuData] = useState(() => {
        const storedMenuData = localStorage.getItem('menuData');
        return storedMenuData ? JSON.parse(storedMenuData) : DefaultMenuData;
    });
    // 从 localStorage 角色数据
    const [roleData, setRoleData] = useState(() => {
        const storedRoleData = localStorage.getItem('roleData');
        return storedRoleData ? JSON.parse(storedRoleData) : DefaultRoleData;
    });

// 监控 menuData 的变化，并同步到 localStorage
    useEffect(() => {
        localStorage.setItem('menuData', JSON.stringify(menuData));
    }, [menuData]);

// 监控 roleData 的变化，并同步到 localStorage
    useEffect(() => {
        localStorage.setItem('roleData', JSON.stringify(roleData));
    }, [roleData]);

    return (
        <div className="container">
            <RoleTable roleData={roleData} setRoleData={setRoleData} menuData={menuData} setMenuData = {setMenuData}/>
        </div>
    );
}

export default RolePage;
